<template>
	<view>
		<view class="content" v-if="dataList.length < 1">
			<u-empty text="所谓伊喵，勇往直前" mode="list"></u-empty>
		</view>
		<view v-else>
			<view>
				<view v-for="item in dataList" :key="item.id"
					style="display: flex;justify-content: center;border-radius: 25rpx;">
					<view style="display: flex;width: 99%;border-radius: 25rpx;margin: 1% 0;">
						<view
							style="background: radial-gradient(circle, rgba(238,174,202,1) 20%, rgba(171,184,225,1) 67%, rgba(148,187,233,1) 84%);width: 20%;height: 100%;display: flex;justify-content: center;align-items: center;border-radius: 25rpx 0 0 25rpx;">
							<u-avatar :src="baseUrl+item.avatar" size="large" @click="pageToMine()"></u-avatar>
						</view>
						<view style="width: 80%;border-radius: 25rpx;">
							<u-cell-group>
								<u-cell-item :title="item.title" :arrow="false">
									<u-icon slot="icon" size="35" :name="getTypeText(item.title)"></u-icon>
									<u-icon slot="right-icon" size="35" :color="item.status == 0 ? '#fa3534':'#19be6b'"
										:name="item.status == 0 ? 'close-circle':'checkmark-circle'"></u-icon>
								</u-cell-item>
								<view v-for="temp in item.cellListOfSimples" :key="temp.id">
									<u-cell-item :title="temp.planTitle" :label="temp.startTime +' - ' +temp.endTime"
										:arrow="temp.status == 0 ?true:false" @click="expendDetail(temp,item)"
										v-if="item.title !=='待办事项'">
										<text slot="right-icon"
											:style="{'color':temp.status == 0 ? '#fa3534':'#19be6b'}">
											{{getStatusText(temp.status)}}
										</text>
									</u-cell-item>
									<u-cell-item :arrow="temp.status == 0 ?true:false" @click="expendDetail(temp,item)"
										v-else>
										<view slot="title">
											<text>{{temp.planTitle}}</text>
											<view style="display: flex;justify-content: flex-start;margin: 3% 0;">
												执行人：
												<u-avatar v-for="(inner,innerIndex) in temp.avatar" :key="innerIndex"
													size="50" :src="baseUrl + inner"></u-avatar>
											</view>
										</view>
										<text slot="right-icon"
											:style="{'color':temp.status == 0 ? '#fa3534':'#19be6b'}">
											{{getStatusText(temp.status)}}
										</text>
									</u-cell-item>
								</view>
							</u-cell-group>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" />
			</view>
		</view>
		<u-action-sheet :list="billActionList" v-model="billActionShow" :cancel-btn="true"
			@click="settingOfBillOption"></u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getBillListOfSimple,
		updateBillCell
	} from '@/api/bot/bill'
	import config from '@/config'
	export default {
		data() {
			return {
				query: {
					pageNum: 1,
					pageSize: 10,
					ownData: true
				},
				dataList: [],
				baseUrl: config.baseUrl,
				currentBill: '',
				currentItem: '',
				// 清单操作栏
				billActionList: [{
					text: '已完成',
					color: '#19be6b',
				}, {
					text: '待完成',
					color: '#fa3534',
				}],
				// 清单操作栏展示
				billActionShow: false,
			};
		},
		mounted() {
			uni.getStorage({
				key: 'groupIdByIndex',
				success: (res) => {
					let data = JSON.parse(res.data);
					this.query.groupId = data.id;
					this.getBillListOfSimple()
				}
			});
		},
		watch: {
			query(newValue) {
				if (newValue.pageNum == 1) {
					this.dataList = []
				}
				this.getBillListOfSimple()
			}
		},
		computed: {
			statusMap() {
				return {
					0: '待完成',
					1: '已完成',
				}
			},
			typeMap() {
				return {
					'存钱计划': 'rmb-circle',
					'出行计划': 'car',
					'待办事项': 'file-text',
					'学习计划': 'edit-pen',
					'日常计划': 'moments'
				}
			}
		},
		onPullDownRefresh() {
			this.getBillListOfSimple()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			getBillListOfSimple() {
				uni.showLoading({
					title: "加载中..."
				})
				getBillListOfSimple(this.query).then(res => {
					this.dataList = this.dataList.concat(res.rows);
					uni.hideLoading()
				})
			},
			settingOfBillOption(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				if (index === 0 && this.currentItem.status === 0) {
					this.currentItem.status = 1;
				} else if (index === 1 && this.currentItem.status === 1) {
					this.currentItem.status = 0;
				} else {
					this.$refs.uToast.show({
						title: `该清单项状态重复`,
						type: 'warning',
					});
					return
				}
				this.updateBillCell()
				if (this.currentBill.cellListOfSimples.every(cell => cell.status === 1)) {
					this.currentBill.status = 1; // 当每条 item 的 cells 的 status 都为 1 时，调用 getBotbilllist 方法
				} else {
					this.currentBill.status = 0;
				}
			},
			updateBillCell() {
				updateBillCell(this.currentItem).then(res => {
					uni.startPullDownRefresh()
				})
			},
			expendDetail(temp, item) {
				let obj = {
					currentBill: item,
					currentItem: temp
				}
				this.openBillAction(obj);
			},
			openBillAction(obj) {
				this.currentItem = obj.currentItem
				this.currentBill = obj.currentBill
				if (this.currentBill.title === '待办事项') {
					this.$tab.navigateTo(
						`/pages/detail/billDetail?billId=${this.currentBill.id}&cellId=${this.currentItem.id}`)
				} else {
					if (this.currentItem.status === 1) {
						this.$refs.uToast.show({
							title: `该请单项已完成`,
							type: 'success',
						})
					} else {
						this.billActionShow = true
					}
				}
			},
			getStatusText(status) {
				return this.statusMap[status] || '未知状态'
			},
			getTypeText(type) {
				return this.typeMap[type] || '未知状态'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
	}
</style>